/**
  transition 钩子函数的使用
 */

<template>
  <div>
    <div class="content-box">
      <button @click="onToggle">toggle</button>
      <transition
        name="fade"
        @before-enter="onBeforeEnter"
        @enter="onEnter"
        @after-enter="onAfterEnter"

        @before-leave="onBeforeLeave"
        @leave="onLeave"
        @after-leave="onAfterLeave"
      >
        <div v-show="isShow">是否显示</div>
      </transition>
    </div>
    
    <h5>功能：</h5>
    <ol class="desc-box">
      <li>transition 钩子函数的使用</li>
      <li>Velocity 的使用</li>
    </ol>
  </div>
</template>

<script>
import '@/utils/plugin/velocity.min.js'
export default {
  data() {
    return {
      isShow: true
    };
  },
  mounted(){
    // console.log(Velocity)
  },
  methods: {
    onToggle() {
      this.isShow = !this.isShow;
    },
    /**
     * 显示 - 开始进入动画
     */
    onBeforeEnter(el){
      el.style.color = '#f90'
      el.style.opacity = 0
      el.innerHTML = '显示 - 开始进入动画 - onBeforeEnter'
    },
    /**
     * 显示 - 进入动画
     * 多个 done ,若没有done，则无法进行下一步，这是 enter 特别之处
     */
    onEnter(el, done){
      Velocity(el, {opacity:1},{duration:1000,complete:done}) // Velocity 的使用
      // setTimeout(() => {
      //   el.style.color = '#f00'
      //   el.innerHTML = '显示 - 进入动画 - onEnter'
      // },1000)
      // setTimeout(() => {
      //   done()
      // },2000)
    },
    /**
     * 显示 - 进入动画后
     */
    onAfterEnter(el){
      el.style.color = '#000'
      el.innerHTML = '显示 - 进入动画后 - onAfterEnter'
    },
    /**
     * 隐藏 - 开始进入动画
     */
    onBeforeLeave(el){
      el.style.color = '#f90'
      el.innerHTML = '隐藏 - 开始进入动画 - onBeforeLeave'
    },
    /**
     * 隐藏 - 进入动画
     * 多个 done ,若没有done，则无法进行下一步，这是 leave 特别之处
     */
    onLeave(el, done){
      setTimeout(() => {
        el.style.color = '#f00'
        el.innerHTML = '隐藏 - 进入动画 - onLeave'
      },1000)
      setTimeout(() => {
        done()
      },2000)
    },
    /**
     * 隐藏 - 进入动画后
     */
    onAfterLeave(el){
      el.style.color = '#000'
      el.innerHTML = '隐藏 - 进入动画后 - onAfterLeave'
    }
  }
};
</script>
